<template>
	<view>
		<!-- 标题 -->
		<uamhead :title="Song.name"></uamhead>
		<!-- 播放器界面 -->
		<view class="bofang1">
			<view class="img-box1">
				<!-- 唱针 -->
				<img src="../../static/needle.png" class="img-tu1" />
			</view>
			<view class="img-box2">
				<!-- 唱片和封面 -->
				<img src="../../static/disc.png" class="img-tu2" />
				<img :src="Song.picUrl" alt="" :style="{ transform: 'rotate(' + rotate + 'deg)' }" class="img" />
				<!-- 播放/暂停按钮 -->
				<text @click="playAudio()" class="btn iconfont">{{ !isPlaying ? '&#xe62c;' :'&#xe63a;' }}</text>
			</view>
		</view>
		<!-- 歌词显示 -->

		<scroll-view class="lyric" scroll-y="true">
			<view class="geci">
				<!-- 动态渲染歌词 -->
				<view class="item" :class="{ active : currentLyricIndex == index}" v-for="(item,index) in lyricLines"
					:key="index">
					{{ item.content}}
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		songPlayer,
		lyricDetail,
		songDetail
	} from '../../common/api'

	export default {
		data() {
			return {
				songUrl: '', // 歌曲地址
				songLyric: '', // 歌词
				Song: {}, // 歌曲详情
				innerAudioContext: null, // 音频播放上下文
				isPlaying: false, // 是否正在播放
				rotate: 0, // 唱片旋转角度
				rotateTimer: null, // 旋转计时器
				lyricLines: [], // 歌词行数组
				currentLyricIndex: 0, // 当前歌词行索引
				timer: null // 定时器
			}
		},
		onLoad(option) {
			let songId = option.songid;
			this.innerAudioContext = uni.createInnerAudioContext();
			// 获取歌曲播放地址
			songPlayer(songId).then(res => {
				this.songUrl = res.data.data[0].url;
				if (this.songUrl) {
					this.playAudio();
				}
			}).catch(error => {
				console.error('获取歌曲播放地址失败：', error);
			});

			// 获取歌曲详情
			songDetail(songId).then(res => {
				this.Song = res.data.songs[0].al;
			}).catch(error => {
				console.error('获取歌曲详情失败：', error);
			});

			// 获取歌词
			lyricDetail(songId).then(res => {
				this.songLyric = res.data.lrc.lyric;
				this.parseLyric();
			}).catch(error => {
				console.error('获取歌词失败：', error);
			});
		},
		onUnload() {
			// 页面卸载时停止音频播放
			this.innerAudioContext.stop();
			clearInterval(this.rotateTimer);
			clearInterval(this.timer);
		},
		methods: {
			playAudio() {
				if (this.isPlaying) {
					// 暂停音频播放
					this.innerAudioContext.pause();
					this.isPlaying = false;
					clearInterval(this.rotateTimer);
					clearInterval(this.timer);
					console.log('已暂停');
				} else {
					// 播放音频
					this.innerAudioContext.src = this.songUrl;
					this.innerAudioContext.play();
					this.rotateImage();
					this.isPlaying = true;
					console.log('开始播放');
					// 开始监听音频以同步歌词
					this.listenLyricIndex();
				}
			},
			rotateImage() {
				// 开始旋转唱片
				this.rotateTimer = setInterval(() => {
					this.rotate += 1;
				}, 25);
			},
			parseLyric() {
				// 解析歌词
				const lines = this.songLyric.split('\n');
				this.lyricLines = lines.map(line => {
					const matches = line.match(/^\[(\d+:\d+\.\d+)\](.*)$/);
					if (matches && matches.length === 3) {
						return {
							time: this.parseTime(matches[1]),
							content: matches[2].trim()
						};
					}
					return null;
				}).filter(Boolean);
			},
			listenLyricIndex() {
				clearInterval(this.timer);
				this.timer = setInterval(() => {
					for (var i = 0; i < this.lyricLines.length; i++) {
						if (this.lyricLines[this.lyricLines.length - 1].time < this.innerAudioContext
							.currentTime) {
							this.currentLyricIndex = this.lyricLines.length - 1;
							break;
						}
						if (this.lyricLines[i].time < this.innerAudioContext.currentTime && this.lyricLines[i + 1]
							.time > this.innerAudioContext.currentTime) {
							this.currentLyricIndex = i;
						}
					}
				});
			},
			parseTime(timeStr) {
				// 将时间字符串转换为秒数
				const timeArr = timeStr.split(':');
				const minutes = parseInt(timeArr[0]);
				const seconds = parseFloat(timeArr[1]);
				return minutes * 60 + seconds;
			}
		}
	}
</script>

<style scoped>
	.bofang1 {
		height: 450px;
	}

	.btn {
		font-size: 50px;
		position: absolute;
		z-index: 3;
	}

	.img-box1 {
		display: flex;
		justify-content: center;
	}

	.img-box2 {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 350px;
		margin-top: 75px;
	}

	.img {
		width: 200px;
		height: 200px;
		border-radius: 50%;
	}

	.img-tu2 {
		position: absolute;
		width: 300px;
		height: 300px;
		z-index: 1;
	}

	.img-tu1 {
		position: absolute;
		height: 300rpx;
		z-index: 2;
		margin-top: 60rpx;
		margin-left: 120rpx;
	}

	.lyric {
		margin-top: 20px;
		height: 250px;
		text-align: center;
		margin-top: -100rpx;
	}

	.geci {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.item {
		font-size: 14px;
		color: #333;
		white-space: pre-line;
		line-height: 1.5;
	}

	.active {
		color: #ff0000;
		font-weight: bold;
	}
</style>